<template>
  <div>
    good添加页
    <el-tabs type="border-card">
      <el-tab-pane label="基础信息">
     
        <p>
          所属分类
          <el-select v-model="inpvalue1" 
           clearable
           placeholder="请选择所属分类">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>

        <p>
          商品名称
          <el-input
            v-model="tableDataName1"
            placeholder="商品名称"
            style="width: 240px"
            size="medium"
          ></el-input>
        </p>
        <p>
          所属品牌
          <el-select v-model="inpvalue2" clearable placeholder="请选择所属品牌">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>
        <p>
          商品简介
          <el-input
            type="textarea"
            v-model="desc"
            style="width: 30%"
          ></el-input>
        </p>
        <p>
          商品图片
          <el-upload
            class="avatar-uploader"
            action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            name="good_pic"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </p>
        <p>
          轮播图图片
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="uploadhttp"
          >
            <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </p>
        <p>
          商品单位
          <el-input
            v-model="tableDataName2"
            placeholder=""
            style="width: 240px"
            size="medium"
          ></el-input>
        </p>
        <p>
          商品库存
          <el-input
            v-model="tableDataName3"
            placeholder=""
            style="width: 240px"
            size="medium"
          ></el-input>
        </p>
        <p>
          商品售价
          <el-input
            v-model="tableDataName4"
            placeholder=""
            style="width: 240px"
            size="medium"
          ></el-input>
        </p>
        <p>
          推荐类型 <el-checkbox 
          v-model="newchecked"
          @change="newcheckedkey=newchecked? 1 :0"
          >新品</el-checkbox
          >
          <el-checkbox 
          v-model="hotchecked"
          @change="hotcheckedkey=hotchecked? 1 :0"
          >人气</el-checkbox>
        
  
        </p>
        <p>
          上架
          <el-switch
            v-model="value"
            active-color="#409EFF"
            inactive-color="#DCDFE6"
            @change="isdelete=value? 1 :0 "
          >
          </el-switch>
        
        </p>
        <p>
          排序
          <el-input
            v-model="tableDataName5"
            placeholder=""
            style="width: 240px"
            size="medium"
          ></el-input>
        </p>
        <p>
          <el-button type="primary" @click="submitForm()"
            >确认保存</el-button
          >
          <el-button @click="resetForm()">取消</el-button>
        </p>
      </el-tab-pane>
      <el-tab-pane label="商品详情">商品详情</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { PostAdminUploadGoodNewPicApi,getCategoryApi,getAdminBrandApi,AdminGoodsStoreApi } from "../../request/httpaip";
export default {
  data() {
    return {
      //上架选择
      value: 0,
      //请求头部
      headers: {},
      //显示的商品图片
      imageUrl: "",
      //显示的轮播图图片图片
      imageUrl1: "",
      // 所属分类
      options1:[
        // {value: '选项1',
        //   label: '黄金糕'}, 
          ],
      // 所属品牌
      options2:[
        // {
        //   value: '选项1',
        //   label: '黄金糕'
        // }, 
        ],
      // 所属分类内容
      inpvalue1:'',
      // 所属品牌内容
      inpvalue2:'',
       //商品名称
      tableDataName1:'',
      //商品简介
      desc:'',
      //商品单位
      tableDataName2:'',
      //商品库存
      tableDataName3:'',
      //商品售价
      tableDataName4:'',
      //新品
      newchecked:false,
      //人气
      hotchecked:false,
      //新品值
      newcheckkey:0,
      //人气值
      hotcheckedkey:0,
      //排序
      tableDataName5:'',
      //分类数据
      Categorylist:[],
      //品牌数据
      Brandlist:[],
      //分类id
      category_id:0,
      //上架选值
      isdelete:0,
    };
  },
  methods: {
    //分类选择事件
    categoryChang(index){
      console.log(index);
      
    //  this.category_id=Categorylist.filter((item)=>{
           
    //        return item[index].id
    //  })
      this.category_id=Categorylist[index].id
      console.log(category_id);

    },



    // 保存事件
    submitForm(){
      AdminGoodsStoreApi({
        //分类id
        category_id: this.inpvalue1,
        // 商品名称
        name:this.tableDataName1,
        // 品牌id
        brand_id:this.inpvalue2,
        // 商品数量
        goods_number:this.tableDataName3,
        // 商品简介
        goods_brief:this.desc,
        //商品详情
        goods_desc:'',
        //排序
        sort_order:this.tableDataName5,
        // （0：上架，1：下架）
        is_delete:this.isdelete,
        // 1（1：新品）
        is_new:this.newcheckkey,
        // 1（人气）
        is_hot:this.hotcheckedkey,
        // 套（单位）
        goods_unit:this.tableDataName2,
        // 105（价格） 
        retail_price:this.tableDataName4,
        //显示的商品图片
        primary_pic_url:this.imageUrl,
        //显示的轮播图图片图片
        list_pic_url:this.imageUrl1,
        //轮播图空数组
        gallerys:['']
      }).then(res=>{
         console.log(res);
      })
    },
    // 取消事件
    resetForm(){
      this.$router.back()
    },

   

    //自定义上传格式 添加 http-request属性 使用回调函数
    uploadhttp(data) {
      console.log(data.file);
      let form = new FormData();
      form.append("good_pic", data.file);
      // 转换成formdata 格式请求  good_pic 键名 , 值data.file
      PostAdminUploadGoodNewPicApi(form).then((res) => {
        // 
        if (res.errno === 0) {
          this.imageUrl1 = res.data.fileUrl;
        }
        console.log(this.imageUrl1);
      });
    },

    //文件上传成功回调函数
    handleAvatarSuccess(res) {
      console.log(res);
      this.imageUrl = res.data.fileUrl;
    },
    //上传文件之前回调函数---检查格式是否正确
    beforeAvatarUpload(flie) {
      console.log(flie);
    },
  },
  created() {
    let token = localStorage.getItem("token");
    this.headers = {
      "X-Nideshop-Token": token,
    };
    // 分类
    getCategoryApi().then(res=>{
      console.log(res.data);
      if(res.errno===0){
        this.Categorylist=res.data
        console.log('我的');
        console.log(this.Categorylist);
        for(var i=0;i<res.data.length;i++){
           this.options1.push({
             value:  res.data[i].id,
            label: res.data[i].name
           })
        }
      }
    })
    // 品牌
    getAdminBrandApi({
      size:54
    }).then(res=>{
      console.log(res.data.data);
       if(res.errno===0){
         this.Brandlist=res.data.data
        for(var i=0;i<res.data.data.length;i++){
           this.options2.push({
             value: res.data.data[i].id,
            label: res.data.data[i].name
           })
        }
      }
    })
  },
};
</script>
 
<style lang = "less" scoped>
p {
  display: flex;
  justify-content: flex-start;
  margin: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>